<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>记笔记</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tui-editor/dist/tui-editor.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tui-editor/dist/tui-editor-contents.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tui-editor/dist/tui-editor-extScrollSync.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tui-editor/dist/tui-editor-extTable.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tui-editor"></script>
</head>
<body>
<h1>记笔记</h1>

<form id="noteForm">
    <div>
        <label for="noteTitle">笔记标题:</label>
        <input type="text" id="noteTitle" name="noteTitle">
    </div>
    <div>
        <label for="noteContent">笔记内容:</label>
        <textarea id="noteContent" name="noteContent"></textarea>
    </div>
    <button type="submit">保存笔记</button>
</form>

<div id="noteList"></div>
<script src="../js/jquery.js"></script>
<script>
$(document).ready(function() {
    // 初始化富文本编辑器
    var editor = new tui.Editor({
        el: document.querySelector('#noteContent'),
        initialEditType: 'markdown',
        previewStyle: 'vertical',
        height: '300px'
    });

    // 加载已保存的笔记
    loadNotes();

    // 监听表单提交事件
    $('#noteForm').submit(function(event) {
        event.preventDefault();
        
        // 获取表单数据
        var title = $('#noteTitle').val();
        var content = editor.getValue();
        var timestamp = new Date().getTime();
        
        // 保存笔记到localStorage
        saveNote({
            title: title,
            content: content,
            timestamp: timestamp
        });

        // 清空表单
        $('#noteTitle').val('');
        editor.setValue('');

        // 重新加载笔记列表
        loadNotes();
    });

    // 保存笔记到localStorage
    function saveNote(note) {
        var notes = JSON.parse(localStorage.getItem('notes')) || [];
        notes.push(note);
        localStorage.setItem('notes', JSON.stringify(notes));
    }

    // 加载已保存的笔记列表
    function loadNotes() {
        var notes = JSON.parse(localStorage.getItem('notes')) || [];
        var $noteList = $('#noteList');
        $noteList.empty();
        
        if (notes.length > 0) {
            $.each(notes, function(index, note) {
                var $noteItem = $('<div>');
                var $noteTitle = $('<h2>').text(note.title);
                var $noteContent = $('<div>').html(note.content);
                var $noteTimestamp = $('<p>').text(new Date(note.timestamp).toLocaleString());

                // 添加编辑按钮
                var $editButton = $('<button>').text('编辑').click(function() {
                    // 将笔记数据填充到表单
                    $('#noteTitle').val(note.title);
                    editor.setValue(note.content);

                    // 删除已保存的笔记
                    deleteNote(index);

                    // 滚动到表单顶部
                    $('html, body').animate({
                        scrollTop: $('#noteForm').offset().top
                    }, 500);
                });

                $noteItem.append($noteTitle, $noteContent, $noteTimestamp, $editButton);
                $noteList.append($noteItem);
            });
        } else {
            $noteList.text('暂无笔记');
        }
    }

    // 删除指定索引的笔记
    function deleteNote(index) {
        var notes = JSON.parse(localStorage.getItem('notes')) || [];
        notes.splice(index, 1);
        localStorage.setItem('notes', JSON.stringify(notes));
    }
});
</script>
</body>
</html>